<template>
	<wd-popup
	  v-model="showBreak"
	  custom-class="break-popup"
	  custom-style="border-radius:8rpx;"
	  modal-style="background:rgba(0,0,0,0.6)"
	>
	  <view class="popup-view">
	    <view class="title">
	      提示
	    </view>
	    <view class="popup-content">
	      <view class="content">
			  {{ props.content }}
	      </view>
	
	      <view class="popup-btns">
	        <view class="popup-btns-item" @click="handleBreak">
	          确定
	        </view>
	        <view class="popup-btns-item" @click="handleCancel">
	          在想想
	        </view>
	      </view>
	
	      <view class="tips-block">
	        <image class="icon" src="/static/images/warning.png" />
	        <text class="text">
	          离开现在的关系网络您将失去所有已经获得的关系
	        </text>
	      </view>
	    </view>
	  </view>
	</wd-popup>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { userUnlink } from '@/api/user'

	const showBreak = defineModel<boolean>()
	const props = defineProps({
		content: {
			type: String,
			default: ''
		},
		// 脱离关系成功的提示
		toast: {
			type: Boolean,
			default: true
		}
	})
	const emits = defineEmits(['success', 'cancel'])
	
	const loading = ref<boolean>(false)
	
	// 脱离关系
	function handleBreak() {
	  if (loading.value)
	    return
	  loading.value = true
	
	  userUnlink().then((res) => {
	    console.log(res)
	    props.toast && uni.showToast({
	      icon: 'none',
	      title: '脱离关系成功',
	    })
	
	    showBreak.value = false
		emits('success')
	  })
	  .finally(() => (loading.value = false))
	}
	
	function handleCancel() {
		showBreak.value = false
		emits('cancel')
	}
</script>

<style lang="scss" scoped>
</style>